<template>
  <div class="doing">
    <div class="main">
      <h2 class="title">正在进行</h2>
      <div class="demo">
        <span>{{ doingList.length }}</span>
      </div>
    </div>
    <div class="doingList">
      <transition-group name="fade">
        <div class="doingItem" v-for="item in doingList" :key="item.id">
          <input
            type="checkbox"
            class="choose"
            v-model="item.isDone"
            @click.prevent="checkIt(item.id)"
          />
          <div class="content">
            <span v-show="!item.isEdit">{{ item.content }}</span>
            <input
              type="text"
              :value="item.content"
              maxlength="25"
              :data-id="item.id"
              v-show="item.isEdit"
              @blur="handleBlur(item, $event)"
              ref="inputContent"
            />
          </div>
          <button class="btn del" @click="deleteIt(item.id)">删除</button>
          <button
            class="btn edit"
            v-show="!item.isEdit"
            @click="handleEdit(item)"
          >
            修改
          </button>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  props: ["doingList"],
  data() {
    return {};
  },
  methods: {
    // 勾选
    checkIt(id) {
      this.$bus.$emit("checkDone", id);
    },
    // 删除
    deleteIt(id) {
      this.$bus.$emit("deleteItem", id);
    },
    // 修改
    handleEdit(doingList) {
      if (doingList.hasOwnProperty("isEdit")) {
        doingList.isEdit = true;
      } else {
        // console.log("doingList身上没有isEdit");
        this.$set(doingList, "isEdit", true);
      }

      this.$nextTick(function () {
        this.$refs.inputContent.forEach((input) => {
          const dataID = input.getAttribute("data-id"); //字符串
          const id = doingList.id; //数字
          if (dataID == id) {
            input.focus();
          }
        });
      });
    },
    // 失去焦点回调（真正执行修改逻辑）
    handleBlur(doingList, e) {
      doingList.isEdit = false;
      if (!e.target.value.trim()) return alert("输入不能为空！");
      this.$bus.$emit("updateTodo", doingList.id, e.target.value);
    },
  },
  mounted() {
    //
  },
};
</script>

<style>
</style>